<template>
	<!-- 提现记录 -->
	<view class="withdraw-list">
		<view class="search-title">
			<!-- <text>共{{ total }}条</text> -->
			<view class="screen" @click="isScreen = true">
				<text>筛选</text>
				<u-icon name="arrow-down-fill" color="#AAAAAA" size="20" class="icon"></u-icon>
			</view>
		</view>
		<view class="list-contain">
			<view class="list-contain-item" v-for="(item, index) in withdrawList"  @click="toInfoHandle(item)" :key="secondKey('A',index)">
				<!-- <view class="title">{{item.orderNo}}</view>
				<view class="text">
					<text>{{item.walletName}}</text>
					<view class="price">
						<text>{{item.amount}}</text>
					</view>
				</view> -->
				<view class="date">
					<view class="time">{{ item.addDate | timeForm }}</view>
					<view class="data flex-column">
						<view class="tag-box flex-space-between">
							<text class="title">{{ item.walletName }}</text>
							<text class="num"
								:class="{ green: item.changeType == 0 }">{{ item.changeType == 0 ? '' : '' }}{{ toFixedNum(item.amount) }}</text>
						</view>
					</view>
					<view >
						提现状态：{{item.status | statusFilters}}
					</view>
					<view >
						审核状态：{{item.auditStatus | auditStatusFilters}}
					</view>
				</view>
			</view>
		</view>

		<u-popup v-model="isScreen" mode="top" border-radius="14">
			<view class="search-box">
				<view class="title">选择筛选条件</view>
				<template>
					<view>日期</view>
					<view class="open-time">
						<view class="open-time-box" @click="fieldTimeHandle(1)">
							<u-icon name="calendar" color="#AAAAAA" size="32" class="icon"></u-icon>
							<u-field v-model="queryParams.startDate" label-width="0" :disabled="true" clickable
								name="datetimePicker" placeholder="请选择开始日期" />
						</view>
						<view class="open-time-box" @click="fieldTimeHandle(2)">
							<u-icon name="calendar" color="#AAAAAA" size="32" class="icon"></u-icon>
							<u-field v-model="queryParams.endDate" label-width="0" :disabled="true" clickable
								name="datetimePicker" placeholder="请选择结束日期" />
						</view>
					</view>
					<!-- 	<u-field label-width="180" v-model="queryParams.agentNo" label="代理商编号" placeholder="请填写代理商编号">
					</u-field> -->
				</template>
				<view class="bottom-btn">
					<view class="right right-btn btn" @click="resetHandel">重置</view>
					<view class="btn"><u-button class="right right-btn" shape="circle" hover-class="none"
							@click="determineHandel">完成</u-button></view>
				</view>
			</view>
		</u-popup>
		<u-picker mode="time" v-model="showPicker" title="选择年月日" @confirm="pickerConfirmHandle"
			@cancel="showPicker = false" />
		<uni-load-more :status="loadMore"></uni-load-more>
	</view>
</template>

<script>
	import {
		rechargeList,
		withdrawList
	} from '_a/earnings/index';
	import loadMoreData from '@/mixins/loadmore';
	import {
		formDateToString,
		getCurrentMonthFirst1,
		getNowMonthNoDate,
		getCurrentYearFirst,
		getFormDate
	} from '_c/utils/date';
	export default {
		mixins: [loadMoreData],
		data() {
			return {
				isScreen: false,
				queryParams: {
					agentType: 2,
					startDate: getCurrentMonthFirst1(new Date()),
					endDate: formDateToString(new Date())
				},
				withdrawList: [],
				showPicker: false,
				total: '',
				pageSize: 50
			};
		},
		onLoad() {
			this.getList();
		},
		filters: {
			timeForm(v) {
				return v.slice(0, 10);
			},
			statusFilters(value) {
				let str = "";
				switch (value) {
					case 0:
						str = '待提现';
						break;
					case 1:
						str = '提现中';
						break;
					case 2:
						str = '提现成功';
						break;
					case 3:
						str = '提现失败';
						break;
					case 4:
						str = '提现取消';
						break;
					default:
						break;
				}
				return str;
			},
			auditStatusFilters(value) {
				let str = "";
				switch (value) {
					case 0:
						str = '待审核';
						break;
					case 1:
						str = '审核成功';
						break;
					case 2:
						str = '审核失败';
						break;
					default:
						break;
				}
				return str;
			}
		},
		methods: {
			getList() {
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					...this.queryParams
				};
				withdrawList(params).then(response => {
					let list = response.rows;
					this.total = response.total;
					this.loadMoreStatusDeal(list);
					this.withdrawList = this.withdrawList.concat(list);
					// if (list.length > 0) {
					// 	this.withdrawList = this.withdrawList.concat(list.filter(item => item.status == 2));
					// }
				});
			},
			reachBottomCallBack() {
				this.getList();
			},
			init() {
				this.$nextTick(() => {
					this.withdrawList = [];
				});
			},
			// 日期选择
			fieldTimeHandle(type) {
				this.tradTimeType = type;
				this.showPicker = true;
			},
			// 日期确认
			pickerConfirmHandle(value) {
				if (this.tradTimeType === 1) {
					this.queryParams.startDate = getFormDate(value);
				} else {
					this.queryParams.endDate = getFormDate(value);
				}
				this.showPicker = false;
			},
			// 重置
			resetHandel() {
				this.queryParams = {
					agentType: 2
				};
			},
			// 搜索确定
			determineHandel() {
				this.$forceUpdate();
				this.init();
				this.pageNum = 1;
				this.withdrawList = [];
				this.getList();
				this.isScreen = false;
			},
			secondKey(first, second) {
				return `${first}_${second}`
			},
			toInfoHandle(item){
				this.$storage.setStore("earningsWithdrawalInfo", item);
				// let option = this.$storage.getStore('earningsInfo') || {};
				this.$nav.push({
					path: '/pages/earnings/earningsWithdrawalInfo',
				});
			}
		}
	};
</script>

<style lang="scss">
	.withdraw-list {
		margin: R(20);
	}

	.search-title {
		display: flex;
		justify-content: space-between;
		margin: R(20) 0;
	}

	.list-contain {
		background-color: #ffff;
		border-radius: R(10);

		&-item {
			// .title {
			// 	font-size: R(28);
			// 	// font-weight: 600;
			// }

			// .text {
			// 	display: flex;
			// 	justify-content: space-between;
			// 	align-items: center;

			// 	.price {
			// 		color: #AAAAAA;
			// 	}
			// }
			.date {
				padding: R(20) R(20) R(20);
				border-bottom: 1px solid #eee;

				.time {
					width: R(164);
					height: R(44);
					line-height: R(44);
					margin-bottom: R(10);
					text-align: center;
					background: #f1f6f8;
					border-radius: R(22);
					font-size: R(26);
					font-weight: 400;
					color: #666666;
				}

				.data {
					.tag-box {
						text-align: center;
						padding: R(0) 0;

						.num {
							font-size: R(36);
							margin-bottom: R(10);
							color: red;
						}

						.title {
							font-size: R(28);
							color: #666666;
						}

						.green {
							color: green;
						}
					}
				}

				.name {
					font-size: R(26);
					margin-bottom: R(20);

					.me {
						position: relative;
						color: #f3e8a1;
						font-size: R(46);

						.font {
							position: absolute;
							left: R(20);
							top: R(10);
							font-size: R(20);
							color: #000;
						}
					}
				}

				.title {
					font-size: R(30);
					font-weight: bold;
					color: #1a1a1a;
				}
			}
		}
	}

	.search-box {
		margin: R(30);

		.title {
			text-align: center;
			font-weight: 400;
			font-size: R(30);
		}

		.open-time {
			display: flex;
			justify-content: space-between;

			&-box {
				display: flex;
			}
		}

		.bottom-btn {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: R(30) 0;

			.btn {
				text-align: center;
				line-height: R(50);
			}
		}
	}
</style>